<template>
  <div class="course-content-list">
    <!-- 刷新 -->
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <!-- 列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" @click="$router.push({ name: 'CourseInfo', params: { courseId: item.id } })">
          <!-- 左侧图片 -->
          <div>
            <img :src="item.courseImgUrl || item.image">
          </div>
          <!-- 右侧课程信息 -->
          <div class="course-info">
            <h3 v-text="item.courseName || item.name"></h3>
            <p v-html="item.previewFirstField" class="course-preview"></p>
            <p v-if="item.discounts" class="course-price-box">
              <span class="course-discounts">¥{{ item.discounts }}</span>
              <s>¥{{ item.price }}</s>
            </p>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { PullRefresh, Cell, List } from 'vant'
// import { getQueryCourses } from '@/services/course'
export default {
  components: {
    VanPullRefresh: PullRefresh,
    VanCell: Cell,
    VanList: List
  },
  props: {
    getCourse: {
      type: Function,
      required: true
    }
  },
  name: 'CourseContentList',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      currentPage: 1,
      isRefreshing: false
    }
  },
  methods: {
    async onRefresh () {
      this.currentPage = 1
      const { data } = await this.getCourse({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list = data.data.records
      } else if (data.content && data.content.length !== 0) {
        this.list = data.content
      }
      this.$toast('刷新成功')
      this.isRefreshing = false
    },
    async onLoad () {
      console.log('加载中')
      const { data } = await this.getCourse({
        currentPage: this.currentPage,
        pageSize: 10,
        status: 1
      })
      if (data.data && data.data.records && data.data.records.length !== 0) {
        this.list.push(...data.data.records)
      } else if (data.content && data.content.length !== 0) {
        this.list.push(...data.content)
      }
      this.currentPage++
      this.loading = false
      if (data.data && data.data.records && data.data.records.length < 10) {
        this.finished = true
      } else if (data.content && data.content.length < 10) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped>
/* 列表固定 */
.course-content-list {
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* cell布局 */
.van-cell__value {
  display: flex;
  height: 100px;
}
/* 左侧图片样式 */
.van-cell__value img {
  width: 80px;
  height: 100%;
  border-radius: 5px;
}
/* 清除h3和p的默认样式 */
h3, p {
  margin: 0;
}
/* 右侧信息布局 */
.course-info {
  /* 右侧填满 */
  flex: 1;
  /* 嵌套flex */
  display: flex;
  /* 改变方向 */
  flex-direction: column;
  padding: 0 10px;
}
/* 让中间的概述充满剩余高度 */
.course-info .course-preview {
  flex-grow: 1;
}
/* 价格的样式 */
.course-info .course-discounts {
  color: red;
  margin-right: 10px;
}
</style>
